<template>
    <div class="task-container">
      <el-page-header title="返回" @back="goBack">
        <template #content>
          <div class="header-content">
            <h1>跨环境任务监控看板</h1>
            <div class="status-summary">
              <el-tag type="success">当前执行任务数：0</el-tag>
              <el-tag>总子任务数：3</el-tag>
            </div>
          </div>
        </template>
      </el-page-header>
  
      <el-tabs type="border-card" class="task-tabs">
        <el-tab-pane 
          v-for="(subTask, index) in taskData" 
          :key="subTask.sub_order_id"
          :label="`子任务 ${index + 1}`"
        >
          <el-descriptions 
            title="基础信息"
            border
            :column="2"
            class="info-card"
          >
            <el-descriptions-item label="子任务ID">
              <el-tag effect="dark">{{ subTask.sub_order_id }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="任务模板">
              <el-icon><document /></el-icon>
              {{ subTask.template_name }}
            </el-descriptions-item>
            <el-descriptions-item label="设备信息">
              <div class="device-info">
                <el-tag type="info">{{ subTask.device_code }}</el-tag>
                <el-link :href="`http://${subTask.service_url}`" type="primary">
                  {{ subTask.service_url }}
                </el-link>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="AGV信息">
              <el-popover placement="right" :width="300" trigger="hover">
                <template #reference>
                  <el-tag type="warning">{{ subTask.device_num }}</el-tag>
                </template>
                <div>设备类型：{{ subTask.device_types.join(', ') }}</div>
              </el-popover>
            </el-descriptions-item>
          </el-descriptions>
  
          <el-card class="timeline-card">
            <template #header>
              <div class="card-header">
                <span>任务时间轴</span>
              </div>
            </template>
            <el-timeline>
              <el-timeline-item
                v-for="time in getTimeEvents(subTask)"
                :key="time.timestamp"
                :timestamp="time.timestamp"
                :type="time.type"
                placement="top"
              >
                {{ time.content }}
              </el-timeline-item>
            </el-timeline>
          </el-card>
  
          <el-collapse v-model="activeNames" class="detail-collapse">
            <el-collapse-item title="路径点信息" name="1">
              <div class="path-points">
                <el-tag
                  v-for="point in subTask.task_path.split(',')"
                  :key="point"
                  class="path-tag"
                  effect="plain"
                >
                  {{ point }}
                </el-tag>
              </div>
            </el-collapse-item>
            <el-collapse-item title="货架信息" name="2">
              <el-descriptions :column="2">
                <el-descriptions-item label="货架模型">
                  {{ subTask.shelf_model }} ({{ subTask.shelf_model_code }})
                </el-descriptions-item>
                <el-descriptions-item label="当前货架">
                  <el-tag type="success">{{ subTask.task_shelf }}</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
          </el-collapse>
  
          <div v-if="subTask.error_desc" class="error-alert">
            <el-alert
              :title="subTask.error_desc"
              type="error"
              :closable="false"
              show-icon
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { Document } from '@element-plus/icons-vue'
  
  const activeNames = ref(['1', '2'])
  const taskData = ref([...]) // 这里填充你的任务数据
  
  const getTimeEvents = (task) => [
    { 
      timestamp: task.create_time,
      content: '任务创建',
      type: 'primary'
    },
    {
      timestamp: task.start_time,
      content: '任务开始执行',
      type: 'success'
    },
    {
      timestamp: task.end_time,
      content: '任务完成',
      type: 'warning'
    }
  ]
  
  const goBack = () => {
    // 返回逻辑
  }
  </script>
  
  <style scoped>
  .task-container {
    padding: 20px;
    background: #f5f7fa;
  }
  
  .header-content {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .status-summary {
    display: flex;
    gap: 10px;
  }
  
  .task-tabs {
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  
  .info-card {
    margin-bottom: 20px;
  }
  
  .device-info {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .timeline-card {
    margin: 20px 0;
  }
  
  .path-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .path-tag {
    font-family: monospace;
  }
  
  .error-alert {
    margin-top: 20px;
  }
  
  .detail-collapse {
    margin-top: 20px;
  }
  
  .el-timeline {
    padding-left: 20px;
  }
  </style>